import {useDrag} from "react-dnd";
import { Radio} from "antd";
import FormItem from "antd/es/form/FormItem";
import {CommonComponentProps} from "../../../../components/editor/interface.ts";
import {CSSProperties} from "react";
import {MoveDrop} from "../../../hooks/useMoveDrop.tsx";

export interface RadioProps extends CommonComponentProps {
    id: number;
    name: string;
    styles?: CSSProperties;
    parentId: number;
    children?: any;
    label:any
    type:any,
    options:any[]
    disabled:boolean
    optionType:any
    buttonStyle:any
    size:string
}

const RadioDev = (props:RadioProps) => {
    const {id,name,options,styles} = props
    const [_,drag] = useDrag({
        type:"Radio",
        item:{
            id,
            type:name,
            dragType: "move"
        }
    })
    return (
        <div className={'relative'}  ref={drag} style={styles} data-component-id={id}>
            <MoveDrop key={name} dropComponentId={id} parentId={props.parentId}  />
            <FormItem >
                <FormItem  label={props.label} name={props.name} rules={props.rule} style={{margin:"0",...styles}}>
                    <Radio.Group {...props as any} >
                        {
                            options && options.map((item:any,index:number)=>{
                                return <Radio style={styles}  key={item.value+"-" + index} value={item.value}>{item.label}</Radio>
                            })
                        }
                    </Radio.Group>
                </FormItem>
            </FormItem>
        </div>
    );
};

export default RadioDev;